<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('申请人信息')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>

<style>
    /*通用样式*/
    * {
        padding: 0;
        margin: 0;
    }

    /*隐藏的div*/
    .hidden-block {
        display: none;
    }

    /*所有划分行div中的第一个*/
    .form-horizontal>div:nth-of-type(1) {
        margin-top: 0;
    }

    /*一行的三个信息的容器*/
    .common-line {
        width: 96%;
        height: 5%;
        margin-top: 1%;
        margin-left: 2%;
    }

    /*每一行的最后一个common-block没有右侧外边距*/
    .common-line>div:last-child {
        margin-right: 0;
    }

    /*每个行div中的信息div块*/
    .common-block {
        width: 30%;
        height: 100%;
        margin-right: 5%;
        float: left;
    }

    /*每个信息div块中的label div*/
    .common-label {
        width: 27%;
        height: 100%;
        float: left;
        padding: 7px 0 0 0;
    }

    /*每个信息div块中的value div*/
    .common-value {
        width: 73%;
        height: 100%;
        float: left;
        background-color: #F0F2F5;
        border: 1px #BBBBBB solid;
        padding: 0;
    }

    /*信息div块中的value select*/
    .value {
        width: 100%;
        height: 100%;
        padding: 1px 0 0 2px;
    }

    /*个人特长div行容器*/
    .specialty-line {
        width: 96%;
        height: 10%;
        margin-top: 1%;
        margin-left: 2%;
    }

    /*个人简介div行容器*/
    .brief-line {
        width: 96%;
        height: 25%;
        margin-top: 1%;
        margin-left: 2%;
    }

    /*个人特长和个人简介的label*/
    .specialty-label, .brief-label {
        width: 8.1%;
        height: 100%;
        float: left;
        padding: 7px 0 0 0;
    }

    /*个人特长和个人简介的value*/
    .specialty-value, .brief-value {
        width: 91.9%;
        height: 100%;
        float: left;
        padding: 7px;
        background-color: #F0F2F5;
        border: 1px #BBBBBB solid;
        white-space:normal;
        word-break:break-all;
        word-wrap:break-word;
        overflow: auto;
    }

    /*按钮行div*/
    .button-line {
        width: 90%;
        height: 15%;
        margin-top: 1%;
        margin-left: 5%;
        position: relative;
    }

    /*  通过按钮   */
    .accept {
        width: 8%;
        height: 50%;
        color: white;
        display: inline-block;
        position: absolute;
        bottom: 0;
        left: 40%;
        border: none;
        border-radius: 2px;
        background-color: #03AAF4;
    }

    /*  不通过按钮   */
    .refuse {
        width: 8%;
        height: 50%;
        color: white;
        display: inline-block;
        position: absolute;
        bottom: 0;
        right: 40%;
        border: none;
        border-radius: 2px;
        background-color: #F34809;
    }
</style>
<body class="white-bg" id="iframe-body">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content" style="height: 100%; padding: 1% 0 0 0; margin: 0">
        <form class="form-horizontal m" id="form-volunteer-edit" th:object="${vtspVolunteer}" style="height: 100%; padding: 0; margin: 0">
            <input id="volunteerId" name="volunteerId" th:field="*{volunteerId}" type="hidden">

            <div class="common-line">
                <div class="common-block">
                    <div class="common-label">
                        申请部门:
                    </div>
                    <div class="common-value">
                        <select id="selectSector" class="value" name="sectorId">
                            <option th:each="item:${sectorList}"
                                    th:value="${item.sectorId}"
                                    th:text="${item.sectorName}">
                            </option>
                        </select>
                    </div>
                </div>
                <div class="common-block">
                    <div class="common-label">
                        姓名:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="volunteerName" disabled="disabled" th:value="*{volunteerName}" type="text">
                    </div>
                </div>
                <div class="common-block">
                    <div class="common-label">
                        学历:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="volunteerDegree" disabled="disabled" th:value="${@dict.getLabel('degree', vtspVolunteer.volunteerDegree)}" type="text">
                    </div>
                </div>
            </div>
            <div class="common-line">
                <div class="common-block">
                    <div class="common-label">
                        联系电话:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="volunteerPhone" disabled="disabled" th:value="*{volunteerPhone}" type="text">
                    </div>
                </div>
                <div class="common-block">
                    <div class="common-label">
                        性别:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="sexName" disabled="disabled" th:value="*{sexName}" type="text">
                    </div>
                </div>
                <div class="common-block">
                    <div class="common-label">
                        学号:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="volunteerNo" disabled="disabled" th:value="*{volunteerNo}" type="text">
                    </div>
                </div>
            </div>
            <div class="common-line">
                <div class="common-block">
                    <div class="common-label">
                        电子邮箱:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="volunteerEmail" disabled="disabled" th:value="*{volunteerEmail}" type="text">
                    </div>
                </div>
                <div class="common-block">
                    <div class="common-label">
                        出生日期:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="volunteerBirthday" disabled="disabled" th:value="${#dates.format(vtspVolunteer.volunteerBirthday, 'yyyy-MM-dd')}" placeholder="yyyy-MM-dd" type="text">
                    </div>
                </div>
                <div class="common-block">
                    <div class="common-label">
                        级时:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="volunteerLevel" disabled="disabled" th:value="*{volunteerLevel}" type="text">
                    </div>
                </div>
            </div>
            <div class="common-line">
                <div class="common-block">
                    <div class="common-label">
                        所在学院:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="volunteerAcademy" disabled="disabled" th:value="*{volunteerAcademy}" type="text">
                    </div>
                </div>
                <div class="common-block">
                    <div class="common-label">
                        专业:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="volunteerProfession" disabled="disabled" th:value="*{volunteerProfession}" type="text">
                    </div>
                </div>
                <div class="common-block">
                    <div class="common-label">
                        所在班级:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="volunteerClass" disabled="disabled" th:value="*{volunteerClass}" type="text">
                    </div>
                </div>
            </div>
            <div class="common-line">
                <div class="common-block">
                    <div class="common-label">
                        所在地:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="volunteerArea" disabled="disabled" th:value="*{volunteerArea}" type="text">
                    </div>
                </div>
                <div class="common-block">
                    <div class="common-label">
                        证件类型:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="cardType" disabled="disabled" th:value="${@dict.getLabel('certificate_type', vtspVolunteer.cardType)}" type="text">
                    </div>
                </div>
                <div class="common-block">
                    <div class="common-label">
                        证件号码:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="cardNo" disabled="disabled" th:value="*{cardNo}" type="text">
                    </div>
                </div>
            </div>
            <div class="common-line">
                <div class="common-block">
                    <div class="common-label">
                        是否工作:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="isWork" disabled="disabled" th:value="${@dict.getLabel('is_work', vtspVolunteer.isWork)}" type="text">
                    </div>
                </div>
                <div class="common-block">
                    <div class="common-label">
                        工作单位:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="workPlace" disabled="disabled" th:value="*{workPlace}" type="text">
                    </div>
                </div>
                <div class="common-block">
                    <div class="common-label">
                        工作方向:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="workTrend" disabled="disabled" th:value="*{workTrend}" type="text">
                    </div>
                </div>
            </div>
            <div class="specialty-line">
                <div class="specialty-label">
                    兴趣特长:
                </div>
                <div class="specialty-value">
                    <div name="volunteerSpecialty" th:field="*{volunteerSpecialty}">
                        [[*{volunteerSpecialty}]]
                    </div>
                </div>
            </div>
            <div class="brief-line">
                <div class="brief-label">
                    个人简介:
                </div>
                <div class="brief-value">
                    <div name="volunteerSynopsis" th:field="*{volunteerSynopsis}">
                        [[*{volunteerSynopsis}]]
                    </div>
                </div>
            </div>
            <div class="common-line">
                <div class="common-block">
                    <div class="common-label">
                        状态:
                    </div>
                    <div class="common-value">
                        <input class="value form-control" name="memberState" disabled="disabled" th:value="${@dict.getLabel('member_state', vtspVolunteer.memberState)}" type="text">
                    </div>
                </div>
            </div>
            <div class="button-line">
                <button id="acceptBTN" style="visibility: hidden" class="accept" onclick="accept()">通过</button>
                <button id="refuseBTN" style="visibility: hidden" class="refuse" onclick="refuse()">不通过</button>
            </div>

            <!--    隐藏div，用于保存vtspVolunteer的sectorName-->
            <div class="form-group hidden-block">
                <label class="col-sm-3 control-label">部门名称：</label>
                <div class="col-sm-8">
                    <input id="sectorName" name="sectorName" value="" class="form-control" type="text">
                </div>
            </div>
        </form>
    </div>

    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />

    <script type="text/javascript" th:inline="javascript">

        /** 获取到iframe中的元素, 调整框架生成iframe的一些样式和内容 */
        //  拿到本页iframe的document
        let parentDocument = parent.document;
        //  本页的title
        parentDocument.getElementsByClassName('layui-layer-title')[0].innerText = "申请人信息";
        //  不显示本页底部自带的button块
        parentDocument.getElementsByClassName('layui-layer-btn')[0].style.display = "none";
        //  设置本页主体部分的大小，位置
        let iframe = parentDocument.getElementsByClassName('layui-layer-iframe')[0];
        iframe.style.zIndex = 100;
        iframe.style.width = 1000 + 'px';
        iframe.style.position = "absolute";
        iframe.style.left = 50 + '%';
        iframe.style.margin = "0 0 0 -500px";
        let shade = parentDocument.getElementsByClassName('layui-layer-shade')[0];
        shade.style.zIndex = 99;

        /** 数据配置 */
        //  路径前缀
        var prefix = ctx + "vtsp/apply";

        //  拿到mvc返回的model
        let mvcData = [[${vtspVolunteer}]];

        //  为渲染的部门块设置sectorId为model返回值的sectorId
        $("#selectSector").val(mvcData.sectorId);

        //  只有状态是未审批，才显示通过和不通过按钮
        if(mvcData.memberState === 1) {
            document.getElementById("acceptBTN").style.visibility = "visible";
            document.getElementById("refuseBTN").style.visibility = "visible";
        }


        /** 方法 */
        //  数据校验
        $("#form-volunteer-edit").validate({
            focusCleanup: true
        });

        //  提交修改信息
        function submitHandler() {
            // sectorName随sectorId变化
            // 获取下拉列表当前选中的项，并把该项的text赋值给form表单中的sectorName，一并提交各后台进行volunteer信息更新
            document.getElementById("sectorName").value = $("#selectSector option:selected").text();
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-volunteer-edit').serialize());
            }
        }

        //  同意一条申请
        function accept() {
            //  获取当前查看的志愿者的volunteerId(唯一标识)
            let id = document.getElementById("volunteerId").value;
            let iframeArr = window.parent.parent.document.getElementById("content-main").getElementsByClassName("xscrum_iframe");
            let volunteerIframe;
            for (let i = 0; i < iframeArr.length; i++) {
                if (iframeArr[i].src === "http://localhost/vtsp/apply") {
                    volunteerIframe = iframeArr[i];
                }
            }
            volunteerIframe.contentWindow.window.acceptAll(id);
            submitHandler();
        }

        //  拒绝一条申请
        function refuse() {
             // 获取当前查看的志愿者的volunteerId(唯一标识)
            let id = document.getElementById("volunteerId").value;
            //  可能存在的bug点，页面弹窗时，整个edit iframe会刷新，之前部门下拉框选中的值不会保存（但是拒绝应该不会更改部门信息？）
            //  获取到上级页面DOM，并且调用
            let iframeArr = window.parent.parent.document.getElementById("content-main").getElementsByClassName("xscrum_iframe");
            let volunteerIframe;
            for (let i = 0; i < iframeArr.length; i++) {
                if (iframeArr[i].src === "http://localhost/vtsp/apply") {
                    volunteerIframe = iframeArr[i];
                }
            }
            volunteerIframe.contentWindow.window.showRefuseModal2(id);
        }

        $("input[name='volunteerBirthday']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
    </script>
</body>
</html>